<template>
	<view>
		<view class="head-box">
			<image src="/pages/more/static/icon/icon-head.png"></image>
			<view class="num1">我的房子值多少钱</view>
			<view class="num2">添加房屋信息，马上预估价格</view>
		</view>
		<view class="form-list">
			<u-form :model="form" ref="uForm" :label-style="labelStyle" label-width="140">
				<u-form-item label="城市" prop="city" right-icon="arrow-right">
					<u-input disabled v-model="form.city" placeholder="请选择" @click="show = !0"/>
				</u-form-item>
				<u-form-item label="小区名称" prop="name">
					<u-input v-model="form.name" placeholder="请输入" disabled @click='areashow=true'/>
				</u-form-item>
				</u-form-item> 
				<u-form-item label="面积" prop="area">
					<u-input v-model="form.area" type="number" placeholder="请输入"/>
				</u-form-item>

			</u-form>
			<view class="tips u-flex">
				<image src="@/static/icon/tips.png"></image>
				<text>提示：线上评估咨询仅供参考，具体以评估报告为准!</text>
			</view>
			<u-button shape="circle" type="primary" @click="submit">提交申请</u-button>
			
			<view class="agree">
				<u-checkbox label-size="26" active-color="#de1f1c" shape="circle" v-model="checked" >已阅读<text 
				 @click.sotp="$app.openXY(6)" style="color: #1f87f9;">《房联网保密协议与服务协议》</text></u-checkbox>
			</view>
		</view>
		<u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
		<!-- <city-select v-model="show" @city-change="cityChange"></city-select> -->
		<!-- 底部安全区适配 -->
		<view class="safe-area-inset-bottom"></view>
		
		
		
			<u-popup v-model="areashow" mode="bottom" height="500">
				<view  style="padding: 20rpx;">
					<u-form-item label="小区名称" prop="name" label-width="200">
						<u-input v-model="names" placeholder="请输入" />
					</u-form-item>
				</view>
				
			
			
				<view @click="Clickcity(item)" v-for="(item,index) in reslust" :key="index" class="u-padding-20 u-flex u-row-between">
					<view>{{item.name}}</view>
					<view class="" style="color: #DE1F1C;">均价{{item.averageprice}}</view>
				</view>
		    </u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reslust:[],
				areashow:false,
				list:[{
						value: 1,
						label: '广东省',
						children: [
							{
								value: 2,
								label: '惠州市',										
								children: [
									{
										value: 3,
										label: '惠城区'
									},
									{
										value: 4,
										label: '惠阳区'
									},{
										value: 5,
										label: '惠东县'
									},
									{
										value: 6,
										label: '博罗县'
									},{
										value: 7,
										label: '龙门县'
									},
									{
										value: 8,
										label: '仲恺高新技术产业开发区'
									},{
										value: 9,
										label: '大亚湾经济技术开发区'
									},
								
								]
							}
						]
					}],
				labelStyle:{color:'#111',fontWeight:'bold',fontSize:'30rpx'},
				names:'',
				form: {
					city:'',
					name: '',
					area: '',
				},
				checked:!0,
				show:!1
			}
		},
		watch:{
			names:{
				immediate:true,
				handler(v){
					if(v){
						this.getAverage(v);
						
					}
				   
				}
			}
		},
		methods: {
			Clickcity(item){
				this.form.name=item.name;
				this.areashow=false
			},
			getAverage(v){
				this.$u.post('/api/index/getAverage',{
					keyword:v
				}).then(res=>{
					this.reslust=res;
				})
			},
			submit(){
				if(!this.checked){this.$u.toast('请先阅读并同意协议');return}
				
				this.$refs.uForm.validate(valid => {
					valid && this.$u.post('/api/housebaseset/housePriceEvaluation',{
						city:this.form.city,
						name:this.form.name,
						area:this.form.area
					}).then(res=>{
						let data = {data:res,form:this.form}
						uni.redirectTo({
							url:'/pages/more/assess-detail?data=' + decodeURIComponent(JSON.stringify(data))
						})
					})
				})
			},
			confirm(e){
				this.form.city = e[2].label;
				
			}
			// cityChange(e){
			// 	this.form.city = e.area.label
			// 	//console.log()
			// }
		},
		onReady() {
			this.$refs.uForm.setRules({
				city:[{required: true,message: '请选择区域'}],
				name:[{required: true,message: '请输入小区名'}],
				area:[{required: true,message: '请输入面积'}]
			})
		}
	}
</script>

<style lang="scss">
	.head-box{
		position: relative;background-color: $tc;color: #fff;height: 300rpx;border-radius: 0 0 40rpx 40rpx;
		image{width: 330rpx;height: 228rpx;position: absolute;right: 20rpx;bottom: 20rpx;}
		.num1{padding-left: 60rpx;font-size: 32rpx;font-weight: bold;padding-top: 60rpx;z-index: 1;position: relative;}
		.num2{padding-left: 60rpx;font-size: 30rpx;padding-top: 20rpx;z-index: 1;position: relative;}
	}
	.form-list{
		padding: 0 42rpx;
		/deep/.u-form-item.u-border-bottom{border-bottom: 1rpx solid #ddd;padding: 18rpx 0!important;
			&::after{display: none;}
		}
		.tips{
			padding: 10rpx 0 80rpx;
			image{width: 24rpx;height: 24rpx;display: block;padding-right: 15rpx;}
			text{font-size: 24rpx;color: #666;}
		}
		.agree{padding: 10rpx 0 20rpx;}
	}
</style>
